<script setup lang="ts">
import { useWeatherStore } from '@/store';
import { colorRamps, colorValues } from 'common/src/utils/color';
import { initTargetList } from 'common/src/utils/weather';

const weatherStore = useWeatherStore();

const legend = computed(() => {
  if (!weatherStore.activeWeather) {
    return [];
  }
  const factor = initTargetList[weatherStore.activeWeather].factor;
  const colorValue = colorValues[factor] || [];
  return colorValue;
});

const background = computed(() => {
  if (!weatherStore.activeWeather) {
    return '';
  }
  const factor = initTargetList[weatherStore.activeWeather].factor;
  const colors = colorRamps[factor];
  let style = 'linear-gradient(to right';
  for (let i = 0; i < colors.length; i++) {
    style = `${style}, ${colors[i][1]}`;
    if (i === 0) {
      style = `${style}, ${colors[i][1]}`;
      style = `${style}, ${colors[i][1]}`;
      if (legend.value[1] === 0) {
        style = `${style}, ${colors[i][1]}`;
      }
    }
  }
  style += ')';
  // console.log(style, style.split(', r'));
  return style;
});
</script>

<template>
  <div v-show="weatherStore.activeWeather" class="color-legend" :style="{background}">
    <span v-for="item in legend" :key="item">{{ item }}</span>
  </div>
</template>

<style lang="less" scoped>
.color-legend {
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.5);
  display: flex;
   width: 300px;
  height: 20px;
  border-radius: 10px;
  pointer-events: visiblePainted;
  span {
    flex: 1;
    font-size: 12px;
    line-height: 20px;
    color: #FFFEFE;
    text-align: center;
    user-select: none;
  }
}
</style>
